<template>
  <div style="background: #fff;padding-bottom:2px;">
        <supplier-header></supplier-header>
    <div class="main">
      <div class="suppierListTitle">
        <span>中标公告</span>
      </div>
      <el-table :data="tenderWinList" size="small" class="tableMain" border>
        <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
        <el-table-column prop="tender.tendername" label="招标项名称" show-overflow-tooltip></el-table-column>
        <el-table-column prop="supplier_NAME" label="中标单位名称" show-overflow-tooltip></el-table-column>
        <el-table-column prop="tender.endtime" label="中标时间" width="180" align="center">
          <template slot-scope="scope">
            <span>{{dateFn(scope.row.tender.endtime)}}</span>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        class="fenye"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
export default {
  data() {
    return {
      currentPage: 1,
      tableData3: [],
      tenderWinList: [{
        tender:{
          'endtime':"2021-9-10",
          tendername:"龙岩学院（东肖、凤凰）物业委托管理服务类采购项目招标公告[第三次]"
        },
        supplier_NAME:"依朵服装公司"
      },
      {
        tender:{
          'endtime':"2021-9-10",
          tendername:"龙岩学院大学科技园LED全彩屏项目（二次询价采购）结果公告"
        },
        supplier_NAME:"美阳科技公司"
      },
      {
        tender:{
          'endtime':"2021-9-10",
          tendername:"龙岩学院教学科研大楼6、7层木门改防盗门项目主材询价公示"
        },
         supplier_NAME:"小城故事建筑有限公司"
      },{
        tender:{
          'endtime':"2021-9-10",
          tendername:"龙岩学院教务处2021多媒体教室设备升级改造建设项目货物类采购项目结果公告(包1)"
        },
         supplier_NAME:"纽卓电子有限公司"
      }],
      tenderWinListData: {
        pageNum: 1,
        pageSize: 10
      },
      total: 0
    };
  },
  mounted() {
    this.tenderWinListFn();
  },
  methods: {
    tenderWinListFn(){
      this.$api.modular.tenderWinList(this.tenderWinListData).then(res => {
        if(res.status == 200){
          if(res.data.code == 200){
            this.total = Number(res.data.data.total);
            this.tenderWinList = res.data.data.list;
          } else {
            this.$message.error(res.data.message);
          }
        } else {
          this.$message.error(res.message);
        }
      })
    },
    handleSizeChange(val) {
      this.tenderWinListData.pageSize = val;
      this.tenderWinListFn();
    },
    handleCurrentChange(val) {
      this.tenderWinListData.pageNum = val;
      this.tenderWinListFn();
    },
    dateFn(date){
      return this.formatDate(date);
    },
    formatDate(value) {
      if (value) {
        let date = new Date(value);
        let y = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? "0" + MM : MM;
        let d = date.getDate();
        d = d < 10 ? "0" + d : d;
        let h = date.getHours();
        h = h < 10 ? "0" + h : h;
        let m = date.getMinutes();
        m = m < 10 ? "0" + m : m;
        let s = date.getSeconds();
        s = s < 10 ? "0" + s : s;
        return y + "-" + MM + "-" + d;
      } else {
        return "";
      }
    },
  }
};
</script>
<style>
.main {
  width: 900px;
  margin: 20px auto;
}
.suppierListTitle {
  height: 42px;
  line-height: 42px;
  border: 1px solid #ddd;
  background-color: #f5f5f5;
  font-size: 14px;
}
.suppierListTitle span {
  background-color: #cf001b;
  color: #fff;
  float: left;
  height: 42px;
  padding: 0 20px;
}
.tableMain {
  margin-top: 20px;
}
.fenye{
  margin-top: 20px;
}
</style>
